<template>
  <div class="app-container">
    <div class="optionBox clearfix">
      <el-form>
        <el-input
          placeholder="请输入内容"
          v-model.trim="categoryValue"
          class="chooseInput"
          clearable>
          <el-select
            v-model="inputCategory"
            slot="prepend"
            placeholder="请选择"
            clearable>
            <el-option
              v-for="category in categoryAttr"
              :label="category.label"
              :value="category.value"
              :key="category.value">
            </el-option>
          </el-select>
        </el-input>
        <label>代偿金额
          <el-input placeholder="下限" v-model.trim="tempMoneyData.minAmount" clearable style="width: 80px;"></el-input>
          <span>-</span>
          <el-input placeholder="上限" v-model.trim="tempMoneyData.maxAmount" clearable style="width: 80px;"></el-input>
        </label>
        <label>订单时间
          <el-date-picker
            v-model="keywords.createTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            clearable
            style="width: 130px;">
          </el-date-picker>
        </label>
        <label>订单状态
          <el-select
            v-model="keywords.status"
            placeholder="订单状态"
            clearable
            style="width: 100px;">
            <el-option
              v-for="statusItem in orderStatus"
              :label="statusItem.label"
              :value="statusItem.value"
              :key="statusItem.value">
            </el-option>
          </el-select>
        </label>
        <el-button
          class="btn-size"
          type="primary"
          icon="el-icon-search"
          title="搜索"
          @click="queryMsg">
        </el-button>
      </el-form>
      <div class="fr clearfix buttonBox new-refrech">
        <el-button
          class="btn-size fl"
          icon="el-icon-refresh"
          title="刷新"
          @click="refresh">
        </el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      stripe
      class="table-out-border"
      v-loading="isLoading">
      <el-table-column align="center" prop="orderId" label="订单编号" min-width="150"></el-table-column>
      <el-table-column align="center" prop="transMode" label="模式" min-width="80">
        <template slot-scope="scope">{{scope.row.transMode|transModeStatusF}}</template>
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间" min-width="140">
        <template slot-scope="scope">{{scope.row.createTime|transformTimeF}}</template>
      </el-table-column>
      <el-table-column align="center" prop="customerName" label="姓名" min-width="70"> </el-table-column>
      <el-table-column align="center" prop="cardNo" label="卡号" min-width="150"> </el-table-column>
      <el-table-column align="center" prop="mobile" label="手机号" min-width="100"> </el-table-column>
      <el-table-column align="center" prop="amount" label="代偿金额(元)" min-width="80"> 
        <template slot-scope="scope">{{scope.row.amount|moneyFormatter}}</template>
      </el-table-column>
      <el-table-column align="center" prop="fee" label="代偿手续费(元)" min-width="100"> 
        <template slot-scope="scope">{{scope.row.fee|moneyFormatter}}</template>
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态" min-width="60">
        <template slot-scope="scope">{{scope.row.status|orderStatusF}}</template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="queryItemDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageBox fr clearfix">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 40]"
        :total="totalCount"
        :page-size="keywords.pageSize"
        :current-page="keywords.page"
        @size-change="handlePageSizeChange"
        @current-change="handlePageChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { clearNullAttr } from '@/api/common'
  import { queryOrderList } from '@/api/order'
  
  export default {
    data: function() {
      return {
        isLoading: false,
        tableData: null,
        totalCount: null, // 数据总条数
        inputCategory: null, // 下拉选择的查询属性
        categoryValue: null, // 下拉选择对应查询属性的值
        categoryAttr: [
          { label: '订单编号', value: 'orderId' },
          { label: '姓名', value: 'customerName' },
          { label: '卡号', value: 'cardNo' },
          { label: '手机号', value: 'mobile' }
        ],
        keywords: { // 查询参数
          page: 1,
          pageSize: 10,
          orderId: null, // 订单编号
          customerName: null, // 姓名
          cardNo: null, // 卡号
          mobile: null, // 手机号
          status: null, // 订单状态
          createTime: null, // 订单时间
          minAmount: null, // 订单金额（下限）搜索条件单位分
          maxAmount: null // 订单金额（上限）搜索条件单位分
        },
        tempMoneyData: {
          minAmount: null, // 订单金额（下限）以2位小数,单位元显示
          maxAmount: null // 订单金额（上限）以2位小数,单位元显示
        },
        orderStatus: [
          // { label: '申请', value: '01' },
          { label: '处理中', value: '02' },
          { label: '成功', value: '03' },
          { label: '失败', value: '04' },
          { label: '中止', value: '05' }
        ] // 订单状态下拉数据
      }
    },
    filters: {
      transModeStatusF(statusCode) {
        const statusList = {
          '2': '2笔',
          '3': '3笔'
        }
        return statusList[statusCode]
      }
    },
    computed: {},
    created: function() {
      this.fetchData()
    },
    methods: {
      fetchData() { // 查询代偿订单列表数据
        this.isLoading = true
        if(this.tempMoneyData.minAmount) {
          this.keywords.minAmount = parseInt(this.tempMoneyData.minAmount * 100)
        } else {
          this.keywords.minAmount = null
        }
        if(this.tempMoneyData.maxAmount) {
          this.keywords.maxAmount = parseInt(this.tempMoneyData.maxAmount * 100)
        } else {
          this.keywords.maxAmount = null
        }
        this.keywords[this.inputCategory] = this.categoryValue
        const uploadData = clearNullAttr(this.keywords)
        queryOrderList({}, uploadData).then(res => {
          console.log('list', res)
          if (res.code === '000000') {
            this.tableData = res.data.OrderList
            this.totalCount = res.data.totalCount
            delete this.keywords[this.inputCategory]
            this.isLoading = false
          }
        }).catch(error => {
          this.isLoading = false
          console.log(error)
        })
      },
      queryMsg() { // 查询按钮点击
        this.keywords.page = 1
        this.fetchData()
      },
      refresh() { // 刷新按钮点击事件
        this.keywords.page = 1
        this.fetchData()
      },
      queryItemDetail(row) {
        this.$router.push({
          path: '/order/suborderlist',
          params: { row: row },
          query: { id: row.orderId }
        })
      },
      handlePageChange(page) { // 页面跳转事件
        this.keywords.page = page
        this.fetchData()
      },
      handlePageSizeChange(pageSize) { // 表格一页显示的数据数目 改变事件
        this.keywords.pageSize = pageSize
        this.fetchData()
      }
    }
  }
</script>
<style lang="scss" scoped>
  /* type="text/scss" */
  .optionBox {
    label{
      margin-right: 10px;
    }
    form {
      .chooseInput {
        width: 300px;
        margin-right: 10px;
        .el-select {
          min-width: 110px;
        }
      }
    }
  }
</style>
